<template>
  <view class="list-item-wrapper">
    <view class="list-item-inner-wrapper" id="listItem">
      <view class="list-item" @click="onClick">
        <view
          class="column-item"
          :key="column.key"
          :style="{ width: column.width || '50%' }"
          v-for="column in columns"
        >
          <view class="label" :style="{ width: labelWidth + 'px' }"
            >{{ column.label }}：</view
          >
          <view :class="['text', getTextColorClass(column)]">{{
            getTextValue(column)
          }}</view>
        </view>
      </view>
      <view class="btn-wrapper">
        <view
          v-for="btn in buttons"
          :key="btn.key"
          class="item-btn"
          :class="btn.color"
          @click="handleClickBtns(btn.key)"
        >
          {{ btn.text }}
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    index: { type: Number, default: 0 },
    buttons: {
      type: Array,
      default: () => [],
    },
    itemData: {
      type: Object,
      default: () => {},
    },
    labelWidth: {
      type: Number,
      default: 70,
    },
    columns: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    onClick() {
      this.$emit("click");
    },
    getOptionItem(column) {
      const { valueMapList, key } = column;
      if (valueMapList) {
        return valueMapList.find((mItem) => mItem.value == this.itemData[key]);
      }
      return null;
    },
    getTextColorClass(column) {
      const oItem = this.getOptionItem(column);
      return oItem ? `${oItem.color}-color` : "";
    },
    getTextValue(column) {
      const { key } = column;
      const oItem = this.getOptionItem(column);
      return oItem ? oItem?.text : this.itemData[key] || "-";
    },
    handleClickBtns(key) {
      this.$emit("clickBtns", key, this.itemData, this.index);
    },
  },
};
</script>
<style scoped lang="scss">
.list-item-wrapper {
  overflow-x: auto;
  width: calc(100vw - 20px);
  margin-bottom: 10px;
  .list-item-inner-wrapper {
    display: flex;
    width: max-content;
    .btn-wrapper {
      display: flex;
      height: auto;
    }
    .item-btn {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      color: #ffffff;
      font-weight: bold;
      border-radius: 4px;
      margin-left: 8px;
      &.error {
        background: $uni-color-error;
      }
      &.primary {
        background: $uni-color-primary;
      }
      &.default {
        background: $uni-text-color-disable;
        color: $uni-text-color;
      }
    }
  }
}
.list-item {
  display: flex;
  flex-wrap: wrap;
  background: #ffffff;
  font-size: 14px;
  padding: 10px 10px 0 10px;
  border: 1px solid #a7a7a7;
  border-radius: 4px;
  width: calc(100vw - 20px);
  .column-item {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
    .label {
      color: $uni-text-color-grey;
      text-align: right;
    }
    .text {
      color: $uni-text-color;
      flex: 1;
    }
    .success-color {
      color: $uni-color-success;
    }
    .error-color {
      color: $uni-color-error;
    }
    .wraning-color {
      color: $uni-color-warning;
    }
    .primary-color {
      color: $uni-color-primary;
    }
    .gray-color {
      color: $uni-text-color-grey;
    }
  }
}
</style>
